<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值语法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
  插值语法  {{info}}    声明式编程
  插值语法支持简单的运算  函数调用   数学运算
  插值语法无法识别 html标签
  插值语法不能使用在标签属性中 一般只用在标签文本内容的获取
-->
<div id="app">

</div>

<script type="text/javascript">
    const vm = new Vue({
        // 使用template进行模板设置时 需要有唯一的根标签  使用字符串完成模板的设置 换行需要使用字符串拼接
        // template:'<div>' +
        //     '<h1>{{info}}</h1>' +
        //     '<p>学生姓名:{{name}}</p>' +
        //     '<p>学生年龄:{{age}}</p>' +
        //     '<p>学生性别:{{sex}}</p>' +
        //     '</div>',

        // 使用反引号 实现模板的设置  ``
        template:`
            <div>
                <h1>{{info}}</h1>
                <p>学生姓名:{{name}}</p>
                <p>学生年龄:{{age+10}}</p>
                <p>学生性别:{{sex}}</p>
            </div>
        `,
        //  data  作用: 为模板提供动态的数据  后期vue在渲染页面数据时 会从data中获取值 渲染在页面中
        data:{
            info:'学生基本信息',
            name:'<b>tom</b>',
            age:20,
            sex:'男'
        }
    })

    vm.$mount("#app")
</script>

</body>
</html>
